<template>
    <div class="page">
        <div class="selectbox">
            <el-select
            v-model="nowType"
            placeholder="Select"
            size="large"
            style="width: 240px"
            @change="pickType"
            >
                <el-option
                    v-for="(value,key) in allList"
                    :key="value.id"
                    :label="key"
                    :value="key"
                />
            </el-select>
        </div>
        <div class="chartbox">
            <yieldrate-chart class="chart" :datalist="nowdata.yeildrate" :title="nowdata.type" :x="nowdata.yeildratelegend"></yieldrate-chart>
            <plato-chart class="chart" :datalist="nowdata.plato" :title="nowdata.type" :x="nowdata.platoX"></plato-chart>
        </div>
    </div>
</template>

<script setup>
import PlatoChart from '../components/integratedComponent/platoChart.vue'
import YieldrateChart from '../components/integratedComponent/yieldrateChart.vue';
import list from '../components/integratedComponent/mock.js'
import { onMounted, ref, watch } from 'vue';

const allList = ref({})
const nowType = ref('')
const nowdata = ref({})

const getAllList = ()=>{
    allList.value = {...list}
    nowType.value = Object.keys(allList.value)[0]
    nowdata.value = allList.value[nowType.value]
}

watch(()=>nowType.value,()=>{
    nowdata.value = allList.value[nowType.value]
})
getAllList()
</script>

<style scoped>
.selectbox{
    padding: 5px 0 5px 30px;
}
.chartbox{
    width: 100%;
    height: calc(100% - 50px);
}
.chart{
    height: 50%;
    width: 100%;
    border: 1px solid black;
}
.page{
    width: 100%;
    height: 100%;
    overflow: auto;
}
.page::-webkit-scrollbar{
    width: 0;
}
</style>